<template>
  <div v-loading="loading" >
    <BasicForm @register="registerForm" >
      <template #authorizationCodeExpire="{ model, field }">
        <div style="width: 60%">
          <InputNumber v-model:value="model[field]" :min="5" addon-after="分钟"/>
        </div>
      </template>
      <template #idTokenExpire="{ model, field }">
        <div style="width: 60%">
          <InputNumber v-model:value="model[field]" :min="5" addon-after="分钟"/>
        </div>
      </template>
      <template #accessTokenExpire="{ model, field }">
        <div style="width: 60%">
          <InputNumber v-model:value="model[field]" :min="5" addon-after="分钟"/>
        </div>
      </template>
      <template #refreshTokenExpire="{ model, field }">
        <div style="width: 60%">
          <InputNumber v-model:value="model[field]" :min="5" addon-after="分钟"/>
        </div>
      </template>
      <template #footer-action="{ model, field }">
        <a-button class="mr-5">重置</a-button>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </template>
    </BasicForm>
  </div>

</template>
<script lang="ts" setup name="AppConfig">
  import { ref, computed, unref, nextTick, onMounted, watch } from "vue"
  import { Divider, Form } from "ant-design-vue"
  import { BasicForm, useForm } from "/@/components/Form/index"
  import { JDictSelectTag } from "/@/components/Form"
  import { InputNumber } from "ant-design-vue"
  import { protocolFormSchema } from "../data"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { isEmpty, isObject, isString, nestedObjectKeyToStr, getNestedObjectKeyStrToObj } from "/@/utils";
  import * as appApi from "/@/api/iam/app"
  import * as fileApi from "/@/api/infra/file"
  const { createMessage, createConfirm } = useMessage()
  const FormItem = Form.Item
  const emit = defineEmits(["success", "register"])
  const defaultProtocol = ref('oidc')
  const rowId = ref("")
  const loading = ref(false)
  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    labelWidth: 200,
    schemas: protocolFormSchema,
    showActionButtonGroup: false,
    wrapperCol: { lg: 24, sm: 24 },
  })

  const props = defineProps({
    data: { type: Object }
  })

  onMounted(() => {
   
  })

  
  watch(
    () => props.data,
    (data) => {
      nextTick(() => {
        initData(data)
      })
      
    }, 
    { immediate: true }
  )

  const initData = async (data) => {
    if (!data) {
      return
    }
    await resetFields()
    rowId.value = data.id
    const newData = nestedObjectKeyToStr(data)
    console.log('newData', newData)
    setFieldsValue(newData)
  }

  async function handleSubmit() {
    try {
      let values = await validate()
      loading.value = true
      const newValues = getNestedObjectKeyStrToObj(values)
      for (const key in newValues) {
        if (key.startsWith('divider')) {
          delete newValues[key]
        }
      }
      delete newValues['footer-action']
      
      console.log("submit", newValues)
      await appApi.updateApp(newValues)
      emit("success", { ...newValues})
      createMessage.success('保存成功')
    } finally {
      loading.value = false
    }
  }
</script>
